<template>
    <div>
        <my-header></my-header>
        <div class="top-box">
            <div class="top-left">
                <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
  <van-dropdown-item v-model="value3" :options="option3" />
</van-dropdown-menu>
            </div>
            <div class="top-right">
                <i class="iconfont icon-search"></i>
            </div>
        </div>
    <hei />
    <div>
        <ul>
            <li v-for="(item, index) in data" :key="index">
                <div class="left">
                    <el-image
                    class="name-img"
                    style="width: 100px; height: 100px"
                    :src="item.img"></el-image>
                    </div>
                    <div class="right">
                        <div class="yi"><p>{{item.name}}</p><span class="l-zi">{{item.level_name}}</span><span class="r-zi">{{item.id}}人气</span></div>
                        <div class="er"> <p>作品8个</p> <p>经验十年</p> <p>评价9.9</p> </div>
                        <div class="san">擅长风格：现代/美式/简约/新古典</div>
                    </div>
            </li>
        </ul>
    </div>
<my-buttom></my-buttom>

    </div>
</template>
<script>
import hei from "@/components/Hei.vue";
import axios from "axios"
import myHeader from '@/components/myHeader'
import myButtom from '@/components/Bottom'
export default {
    components:{
        hei,
        myHeader,
    myButtom,
    },
    created(){
        axios.get("/design.json").then(res=>{
            this.data=res.data.data.list
            console.log(this.data);
        })
    },
    methods(){

    },
  data() {
    return {
      value1: 0,
      value2: 'a',
      value3:"A",
      option1: [
        { text: '筛选', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '风格', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
        option3: [
        { text: '排序', value: 'A' },
        { text: '好评排序', value: 'B' },
        { text: '销量排序', value: 'C' },
      ],
      data:[]
    };
  },
};
</script>
<style lang="scss" scoped>
.er{
    display: flex;
    p{
        flex:1;
    }
}
.r-zi{
    width: 60px !important;
    margin: 0;padding: 0;
    // background-color: #35c891;
    color: #adadad;
}
.yi{
    display: flex;
}
p{
    margin: 0;padding: 0;
    width: 50%;
    height: 100%;
    line-height: 30px;
    margin-left: 10px;
    float: left;

}
ul{
    width: 100%;
    height: 100%;
    li{
        width: 100%;
        height: 150px;
        // line-height: 150px;
        display: flex;
        justify-content: space-between;
            .l-zi{
        margin: 0;padding: 0;
        line-height: 20px !important;
        width: 190px;
        flex: 1;
        font-size: 14px;
        background-color: #35c891;
        color: whitesmoke;
        height: 20px;
        margin-top: 5px;
    }
        .left{
            width: 25%;
            .name-img{
                border-radius: 50px;
            }
        }
        .right{
            width: 73%;
            margin: 5px 0;
            div{
                height: 30%;
            }
        }
      
    }
}
.top-box{
    width: 100%;
    height: 60px;
    display: flex;
    .top-left{
        width: 80%;
        height: 60px;
    }
    .top-right{
        text-align: center;
        width: 20%;
        height: 100%;
        line-height: 50px;
        i{
            font-size: 24px;
            color: #35c891;
        }
    }
}
</style>
